<template>
	<div class="bg">
		<goback title="订单中心"></goback>

		<ul class="TopNav">
			<li :class="{ 'select': currentIndex === 0 }" @click="goSwiper(0)">全部</li>
			<li :class="{ 'select': currentIndex === 1 }" @click="goSwiper(1)">待发货</li>
			<li :class="{ 'select': currentIndex === 2 }" @click="goSwiper(2)">待确认</li>
			<li :class="{ 'select': currentIndex === 3 }" @click="goSwiper(3)">已完成</li>
			<li :class="{ 'select': currentIndex === 4 }" @click="goSwiper(4)">回收去向</li>
		</ul>

		<!-- 			<ul class="TopNav">
				<li>全部</li>
				<li>待收货</li>
				<li>待确认</li>
				<li>已完成</li>
				<li>待评价</li>
				<li>回收去向</li>
			</ul>
			 -->


		<swiper class="swiper-container" @slideChange="onSlideChange" ref="mySwiper">

			<swiper-slide class="swiper-slide">

				<div v-if="orders.length==0">
					<div class="empty">
						<h1>您还没有相关的订单</h1>
						<h2>可以去看看有哪些回收的</h2>
					</div>
				</div>

				<div v-else>
					<div class="card1" v-for="(item,index) in orders" @click="goInfo(item.orderNumber)">
						<div class="card_title1">
							<img class="card1-icon" :src="require(`@/assets/icons/自营.png`)" alt="">
							<div>{{item.buyer.name}} - {{item.trade_type}}</div>
						</div>

						<div class="card_context1">
							<img :src="item.head_img" alt="">
							<div class="card_context2">
								<div>优质{{item.productName}}{{item.product_amount}}kg——天然纯净之选</div>
								<div>数量 ✖{{item.product_amount}}</div>
							</div>

							<div class="card_context3"><div style="font-weight: bold;">
									￥{{item.product_amount*item.product_price}}
								</div>
							</div>

						</div>
						<div class="card_context3">
							<div class="card_context" @click.stop="deleteDom(index)">
								<div>删除订单</div>
							</div>
							<div class="card_context" @click="$router.push('/orderdetail')">
								<div>立即查看</div>
							</div>
						</div>

					</div>
				</div>


			</swiper-slide>

			<swiper-slide class="swiper-slide">


				<div v-if="getFilter(0).length==0">
					<div class="empty">
						<h1>您还没有相关的订单</h1>
						<h2>可以去看看有哪些回收的</h2>
					</div>
				</div>

				<div v-else>
					<div class="card1" v-for="(item,index) in getFilter(0)" @click="goInfo(item.orderNumber)">
						<div class="card_title1">
							<img class="card1-icon" :src="require(`@/assets/icons/自营.png`)" alt="">
							<div>{{item.buyer.name}} - {{item.trade_type}}</div>
						</div>
						<div class="card_context1">
							<img :src="item.head_img" alt="">
							<div class="card_context2">
								<div>优质{{item.productName}}{{item.product_amount}}kg——天然纯净之选</div>
								<div>数量 ✖{{item.product_amount}}</div>
							</div>

							<div class="card_context3"><div style="font-weight: bold;">
									￥{{item.product_amount*item.product_price}}
								</div>
							</div>

						</div>
						<div class="card_context3">
							<div class="card_context">
								<div @click="doBehaviour(item,$event)">{{item.behaviour}}</div>
							</div>
						</div>
					</div>
				</div>



			</swiper-slide>

			<swiper-slide class="swiper-slide">


				<div v-if="getFilter(1).length==0">
					<div class="empty">
						<h1>您还没有相关的订单</h1>
						<h2>可以去看看有哪些回收的</h2>
					</div>
				</div>

				<div v-else>
					<div class="card" v-for="(item,index) in getFilter(1)" @click="goInfo(item.orderNumber)">
						<div class="card_title1">
							<img class="card1-icon" :src="require(`@/assets/icons/自营.png`)" alt="">
							<div>{{item.buyer.name}} - {{item.trade_type}}</div>
						</div>
						<div class="card_context1">
							<img :src="item.head_img" alt="">
							<div class="card_context2">
								<div>优质{{item.productName}}{{item.product_amount}}kg——天然纯净之选</div>
								<div>数量 ✖{{item.product_amount}}</div>
							</div>

							<div class="card_context3"><div style="font-weight: bold;">
									￥{{item.product_amount*item.product_price}}
								</div>
							</div>

						</div>
						
							<div class="card_context3">
								<div class="card_context" @click="jump" v-if="$store.getters.getUser.position==0">
									<div>再来一单</div>
								</div>
								<div class="card_context">
									<div @click="doBehaviour(item,$event)">{{item.behaviour}}</div>
								</div>
							</div>
					</div>
				</div>


			</swiper-slide>

			<swiper-slide class="swiper-slide">

				<div v-if="getFilter(2).length==0">
					<div class="empty">
						<h1>您还没有相关的订单</h1>
						<h2>可以去看看有哪些回收的</h2>
					</div>
				</div>

				<div v-else>
					<div class="card1" v-for="(item,index) in getFilter(2)" @click="goInfo(item.orderNumber)">

						<div class="card_title1">
							<img class="card1-icon" :src="require(`@/assets/icons/自营.png`)" alt="">
							<div>{{item.buyer.name}} - {{item.trade_type}}</div>
						</div>
						<div class="card_context1">
							<img :src="item.head_img" alt="">
							<div class="card_context2">
								<div>优质{{item.productName}}{{item.product_amount}}kg——天然纯净之选</div>
								<div>数量 ✖{{item.product_amount}}</div>
							</div>

							<div class="card_context3"><div style="font-weight: bold;">
									￥{{item.product_amount*item.product_price}}
								</div>
							</div>

						</div>

						
							<div class="card_context3">
								<div class="card_context" @click.stop="deleteDom(index)">
									<div>删除订单</div>
								</div>
								<div class="card_context">
									<div @click="doBehaviour(item,$event)">{{item.behaviour}}</div>
								</div>
							</div>

					</div>
				</div>

			</swiper-slide>

			<swiper-slide class="swiper-slide">
				<div v-if="getFilter(3).length==0">
					<div class="empty">
						<h1>您还没有相关的订单</h1>
						<h2>可以去看看有哪些回收的</h2>
					</div>
				</div>

				<div v-else>
					<div class="card1" v-for="(item,index) in getFilter(3)" @click="goInfo(item.orderNumber)">

						<div class="card_title1">
							<img class="card1-icon" :src="require(`@/assets/icons/自营.png`)" alt="">
							<div>{{item.buyer.name}} - {{item.trade_type}}</div>
						</div>
						<div class="card_context1">
							<img :src="item.head_img" alt="">
							<div class="card_context2">
								<div>优质{{item.productName}}{{item.product_amount}}kg——天然纯净之选</div>
								<div>数量 ✖{{item.product_amount}}</div>
							</div>

							<div class="card_context3"><div style="font-weight: bold;">
									￥{{item.product_amount*item.product_price}}
								</div>
							</div>

						</div>

						
							<div class="card_context3">
								<div class="card_context">
									<div @click="doBehaviour(item,$event)">{{item.behaviour}}</div>
								</div>
							</div>

					</div>
				</div>
			</swiper-slide>




		</swiper>




	</div>
</template>

<script>
	export default {
		name: "orders",
		props: ['current'],
		data() {
			return {
				currentIndex: 0,
				orders: [],
				collectway: ''
			}
		},
		mounted() {
			this.getData();
		},
		beforeDestroy() {
			// 在组件销毁前卸载Swiper  
			this.$refs.mySwiper.swiperInstance.destroy(true,
				true); // 第二个参数为true会重置swiper到初始状态，第三个参数为true会移除swiper内部的dom元素  
		},
		computed: {

		},
		methods: {
			getData() {

				if (this.$store.getters.getUser.name == '未登录') {
					this.$toast.showMessage("您还未登入,无法查看");
					return;
				}

				let url = '';
				if (this.$store.getters.getUser.position == 0) {
					url = `${this.IP}/get_all_seller_orders`;
				} else {
					url = `${this.IP}/get_all_buyer_orders`;
				}

				this.axios.get(url, {
					params: {
						token: this.getStorage('token')
					}
				}).then(res => {
					this.orders = res.data;
					this.getSrc()
					let indicesToDelete = [];
					console.log(this.orders)
					let arr = this.getStorage('delete_orders')
					 arr = arr || [];
					 for (let i = 0; i < this.orders.length; i++) {
					            let e = this.orders[i];
					            let hasin = arr.some(c => c.includes(e.orderNumber));
					            if (hasin) {
					                indicesToDelete.push(i);
					            }
						if (e.trade_type == 0 && this.$store.getters.getUser.position == 0 && e
							.trade_status == 0) {
							e.behaviour = "待你去发货"
						} else if (e.trade_type == 0 && this.$store.getters.getUser.position == 1 && e
							.trade_status == 0) {
							e.behaviour = "待农户发货"
						} else if (e.trade_type == 1 && this.$store.getters.getUser.position == 0 && e
							.trade_status == 0) {
							e.behaviour = "待企业上门"
						} else if (e.trade_type == 1 && this.$store.getters.getUser.position == 1 && e
							.trade_status == 0) {
							e.behaviour = "待你去上门"
						} else if (e.trade_type == 0 && this.$store.getters.getUser.position == 0 && e
							.trade_status == 1) {
							e.behaviour = "待企业确认"
						} else if (e.trade_type == 0 && this.$store.getters.getUser.position == 1 && e
							.trade_status == 1) {
							e.behaviour = "待你去确认"
						} else if (e.trade_type == 1 && this.$store.getters.getUser.position == 0 && e
							.trade_status == 1) {
							e.behaviour = "待企业确认"
						} else if (e.trade_type == 1 && this.$store.getters.getUser.position == 1 && e
							.trade_status == 1) {
							e.behaviour = "待你去确认"
						} else if (e.trade_type == 0 && this.$store.getters.getUser.position == 0 && e
							.trade_status == 2) {
							e.behaviour = "待企业填写回收去向"
						} else if (e.trade_type == 0 && this.$store.getters.getUser.position == 1 && e
							.trade_status == 2) {
							e.behaviour = "待你去填写回收去向"
						} else if (e.trade_type == 1 && this.$store.getters.getUser.position == 0 && e
							.trade_status == 2) {
							e.behaviour = "待企业填写回收去向"
						} else if (e.trade_type == 1 && this.$store.getters.getUser.position == 1 && e
							.trade_status == 2) {
							e.behaviour = "待你去填写回收去向"
						} else if (e.trade_status == 3) {
							e.behaviour = "查看去向"
						}
						console.log(e)
				}

					indicesToDelete.reverse().forEach(index => {

						this.orders.splice(index, 1); // 删除订单  

					});
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			doBehaviour(e,event) {
				event.stopPropagation(); 
				
				console.log(e.behaviour)
				if (e.behaviour == '待你去发货') {
					
					this.axios.get(`${this.IP}/farmer_send`, {
						params: {
							token: this.getStorage('token'),
							ordernum: e.orderNumber
						}
					}).then(res => {
						this.$toast.showMessage(res.data);

						this.tipOtherIfOnline(e.orderNumber);
						this.getData();
					})

				} else if (e.behaviour == '待农户发货') {

				} else if (e.behaviour == '待企业确认') {

				} else if (e.behaviour == '待你去确认') {

					this.axios.get(`${this.IP}/buyer_confirm`, {
						params: {
							token: this.getStorage('token'),
							ordernum: e.orderNumber
						}
					}).then(res => {
						this.$toast.showMessage(res.data);

						this.tipOtherIfOnline(e.orderNumber);
						this.getData();
					})

				} else if (e.behaviour == '待企业填写回收去向') {

				} else if (e.behaviour == '待你去填写回收去向') {


					this.$router.push('/collectway?ordernum=' + e.orderNumber);




				} else if (e.behaviour == '待企业上门') {

				} else if (e.behaviour == '待你去上门') {


					this.axios.get(`${this.IP}/buyer_send`, {
						params: {
							token: this.getStorage('token'),
							ordernum: e.orderNumber
						}
					}).then(res => {
						this.$toast.showMessage(res.data);

						this.tipOtherIfOnline(e.orderNumber);
						this.getData();
					})

				}

			},
			goSwiper(n) {
				this.$refs.mySwiper.swiperInstance.activeIndex = n;
				this.currentIndex = n;
			},
			onSlideChange() {
				this.currentIndex = this.$refs.mySwiper.swiperInstance.activeIndex;
			},
			getFilter(status) {
				return this.orders.filter(e => e.trade_status === status);
			},
			tipOtherIfOnline(e) {
				const send_msg = JSON.stringify({
					action: 'update_order',
					data: {
						ordernum: e
					}
				});
				this.$store.getters.getSocket.send(send_msg);
			},
			goInfo(e) {
				this.$router.push('/orderdetail?ordernum=' + e);
			},
			getSrc() {
				this.orders.forEach((e) => {

					let url = `${this.IP}/shop_head/${e.buyer.uid}.jpg`
					this.axios.head(url).then(res => {

						if (res.status == 200) {
							e.head_img = url
						}

						this.$forceUpdate();
					}).catch(error => {
						// 处理错误  
						e.head_img = `${this.IP}/shop_head/normal.jpg`
					});;;
				})
				// console.log(this.shops);
			},
			
			jump(){
				this.$router.push('/detail?shopid=' + uid);
			},
			deleteDom(index) {
				this.$message({
					title: '确认删除',
					content: '你确定要删除回收订单吗？',
					confirmText: '确定',
					cancelText: '取消',
					showCancel: true,
					callback: (action) => {
						if (action === 'confirm') {
							if (this.getStorage('delete_orders') == null) {
								let arr = [];
								arr.push(this.orders[index].orderNumber)
								this.setStorage('delete_orders', arr, 0);
							} else {

								let arr = this.getStorage('delete_orders')
								arr.push(this.orders[index].orderNumber)
								this.setStorage('delete_orders', arr, 0);
							}
							this.orders.splice(index, 1);
						} else {
				 		//
						}
					}
				});

				// 处理表单提交逻辑  
				// 可以使用this.$emit来通知父组件表单已提交  

			},
		}
	}
</script>

<style scoped>
	.swiper-slide {
		height: auto;
	}

	.swiper-container {
		height: auto;
	}

	.TopNav {
		width: 100vw;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		overflow-x: auto;
		scroll-snap-type: x;
		scrollbar-width: none;
		/* Firefox */
	}

	.TopNav li {
		text-align: center;
		scroll-snap-align: start;
		scroll-snap-stop: normal;
		min-width: 16vw;
		margin: 1vw;
		font-size: 28px;
		padding: 1vw;
	}


	.TopNav li.select {
		font-weight: bold;
		color: #333;
		/* 你可以根据需要更改文字颜色 */
		text-shadow: -2px -2px 4px rgba(255, 255, 255, 0.5);
		/* 内部阴影，白色，半透明 */
		border-bottom: 2px solid #fc9b39;
	}

	.empty {
		width: 50vw;
		text-align: center;
		margin: 0 auto;
		margin-top: 10vh;
		color: gray;
	}

	.card1 {
		background-color: white;
		margin: 0 2vw;
		border-radius: 10px;
	}

	.card1-icon {
		width: 4vh;
	}

	.card_title1 {
		height: 10vw;
		font-size: 4vw;
		margin-left: 4vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.card_title1 img{
		margin-right: 2vw;
	}
	
	.card1+.card1{
		margin-top:1vh;
	}
	
	.card_title1 div{
		font-weight:bold;
	}

	.card_context1 {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.card_context2 {
		display: flex;
		flex-direction: column;
		height: 10vh;

	}
	
	.card_context1 .card_context3 div{
		margin-top:20vw;
		margin-right: 3vw;
		color: #333;
		font-size: 28px;
	}


	.card_context1 img {
		width: 10vh;
		padding: 1vh;
		border: 1px solid #f3f3f3;
		border-radius: 5vw;
		margin-left: 2vw;
		margin-right:2vw;
	}

	.card_context3 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.card_context div {
		background-color: #fc9b39;
		color: white;
	}
</style>
